<template>
    <div class="app">
                <!-- 这是一个轮播图的组件 -->
            <div class="swipeBox Box">
               <slider :swipeList='swipeList'></slider>    
            </div>
            <!-- 商品行为 -->
            <div class="behavior Box">
                <h3 class="behavior_title">{{info.title}}</h3>
                <div class="behavior_content">
                    <div class="behavior_content_price">
                        市场价:<span style="text-decoration:line-through;">￥{{info.market_price}}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销售价:<span style="font-size:20px; color:red;font-weight:700">￥{{info.sell_price}}</span> 
                    </div>
                    <div class="behavior_content_count">
                        购买数量:<subnumber @count="getcount"></subnumber>
                        <transition
                               @before-enter="beforeEnter"
                               @enter="enter"
                               @after-enter="afterEnter"
                            >
                            <span id="ball" v-show="isshow" class="show"></span>
                        </transition>
                    </div>
                    <div class="behavior_content_button">
                         <mt-button type="primary" size="small">立即购买</mt-button>
                            <mt-button type="danger"  size="small" @click="addShopCar">加入购物车</mt-button>
                    </div>

                </div>
            </div>
            <!-- 商品参数 -->
             <div class="Box params">
                <h3>商品参数</h3>
                <ul>
                    <li>商品货号:{{info.goods_no}}</li>
                    <li>库存情况：:{{info.stock_quantity}}</li>
                    <li>上架时间：:{{info.add_time | fmtdate('YYYY-MM-DD HH:mm:ss')}}</li>
                </ul>
            </div>
                    <!-- 4.0 图文介绍和商品评论 -->
           <div class="footer">
            <mt-button @click="desc" plain type="primary" size="large">图文介绍</mt-button>
            <mt-button @click="comment" class="mt1" plain type="danger"  size="large">商品评论</mt-button>
        </div>
    </div>
</template>

<script>
     import slider from '../subcomp/slider.vue'
    import common from '../../kits/common.js';
    import subnumber from '../subcomp/subnumber.vue';//引入加减数量的组件
    import {setItem} from '../../kits/localStorageHelper.js';
    import {vueobj,KEY} from '../../kits/commonvue.js'
    export default{
        created(){
            //获得id
            this.id = this.$route.params.id;
           
            this.getWipeList();
             this.getinfo();
        },
        data(){
            return {
                id:0,
                info:[],
                isshow:false,
                swipeList:[],
                count:1 //增加或减的值
            }
        },
        methods:{
            //获得商品详情页的数据
            getWipeList(){
                 // /api/getthumimages/:imgid
                let url = common.apihost + '/api/getthumimages/'+ this.id;
                this.$http.get(url).then(res=>{
                    if(res.body.status !==0){
                        return alert(res.body.message);
                    }
                    res.body.message.forEach(item=>{
                    
                        item.img = common.imghost+ item.src;
                        item.url = "";

                    });
                    this.swipeList = res.body.message;
                    
                },res=>{
                    console.log('数据获得失败');
                })
               
            },
            //加入到购物车
            addShopCar(){

                //当用户点击加入购物车之后，那么就先将数据存储在本地
                // 1.0 获得id与数量s
                // console.log(this.count,this.id);
                setItem({count:this.count,goodsid:this.id});
                vueobj.$emit(KEY,this.count);
                this.isshow = !this.isshow;
                
            },
            //获得参数区
            getinfo(){
                var url = common.apihost +'/api/goods/getinfo/'+this.id;

                this.$http.get(url).then(res=>{
                    this.info = res.body.message[0];
                    console.log(res.body.message[0])
                   
                });
            },
            getcount(count){
                //获得的是那个增加或者删除的按钮的值 
                this.count = count;

            },
            // 注册动画的构子函数
            beforeEnter(el){
  
                //初始化当前的动画的位置
                el.style.transform = "translate(0,0)";
                el.style.opacity = '0' 
            },
            enter(el,done){
               
                var rf = el.offsetHeight;
                this.$nextTick(function(){
                    el.style.transform = "translate(190px,300px)";
                    el.style.opacity = '1' 
                });
                done();//表示动画完成了
            },
            afterEnter(el){
                this.isshow = !this.isshow
            },
            desc(){
                //通过这里跳转到另一个组件
                 let id = this.$route.params.id;
                this.$router.push({name:'goodsdesc',params:{id:id}})

            },
            comment(){
                let id = this.$route.params.id;
                this.$router.push({name:'goodscomment',params:{id:id}})
            }
        },
         components:{
            slider,subnumber
        }
    }
</script>

<style scoped>
    
    .Box{

        padding: 5px;
        width: 98%;
        /*height: 500px;*/
        border-radius: 5px; 
        border:1px solid rgba(0,0,0,0.3);
        margin:0 auto;
    }
    .swipeBox{
          margin-top:42px;
    }
    .behavior{
        text-align: left;
        margin-top: 10px;
    }
    .behavior .behavior_title{
        margin-left: 5px;
        font-size:18px;
        color: #0094ff;
        border-bottom: 1px solid rgba(92,92,92,0.3);
        padding:10px 0;
    }
    .behavior_content{
        line-height: 50px;
    }
    .behavior_content_button{
        margin-top: 20px;
    }
    .behavior_content_count{
        position: relative;
    }
    /*小球*/

    #ball {
        position: absolute;
        width: 20px;
        height:20px;
        left:100px;
        top:10px;
        border-radius: 50%;
        background: red;
        z-index: 100;
         transition: all 0.6s cubic-bezier(0.25,0.1,0.25,1);
    }
</style>